<template>
   <div class="box">
        <div class="head">
            <div class="img">
                <img src="/static/imgs_s09/s09_foot04.png" alt="">
                <div class="foot"></div>
            </div>
            <div class="title">汇方圆·四川担担面(旗舰店)50份价值 56元双人餐免费抢</div>
            <div class="other">
                <div class="one">
                    <span class="a">￥0</span>
                    <span class="b">100中奖名额</span>
                </div>
                <div class="two">
                    <span class="c">￥56.00</span>
                    <span class="d">9756已报名</span>
                </div>
            </div>
        </div>

        <div class="fit">
            <div class="fit-tenant">适用商户</div>
            <div class="fit-shop">
                <img src="/static/imgs_s09/s09_shop.png" alt="">
                <span>汇方圆·郑州旗舰店</span>
            </div>
            <div class="fit-address">
                <div class="left">
                    <img src="/static/imgs_s09/s09_position.png" alt="">
                    <div class="font">河南省郑州市金水区中州大道农业路苏荷中心1926</div>
                </div>
                <div class="center">
                    <img src="/static/imgs_s09/s09_navigation.png" alt="">
                    <span>导航</span>
                </div>
                <div class="right">
                    <img src="/static/imgs_s09/s09_phone.png" alt="">
                    <span>电话</span>
                </div>
            </div>
        </div>

        <div class="activity">
            <div class="title">
                <span>活动内容</span>
                <span>活动规则</span>
                <span>更多信息</span>
            </div>
            <p>活动内容</p>
            <div class="content">
                <span>双人餐：</span>
                <span>招牌担担面 两份 32元</span>
                <span>老成都冰粉 16元</span>
                <span>鸡爪 两个 8元</span>
            </div>
        </div>

        <div class="rule">
            <div class="rule-title">活动规则</div>
            <div class="rule-time">体验时间</div>
            <div class="rule-date">2019年11月16日 00:00 - 2019年12月15日 23:30
                <br>
                不需要预约
            </div>
        </div>

        <div class="procedure">
            <div class="procedure-title">活动流程</div>
            <img src="/static/imgs_s09/s09_procedure.png" alt="" class="">
            <div class="procedure-point">提示：中奖结果将在<span>报名截止后的2-3天</span>内公布</div>
        </div>

        <div class="more">
            <div class="more-title">更多信息</div>
            <div class="more-information">这里是更多信息...</div>
        </div>

        <div class="bottom">
            <div class="left">
                <div class="bottom-time">距报名截止还有：</div>
                <div class="bottom-date">06天07小时30分20秒</div>
            </div>
            <div class="bottom-sign">我要报名</div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #ddd;
        }

        .box .head .img img {
            height: 169px;
            width: 302px;
        }

        .head .img {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 355px;
            justify-content: space-between;
            margin-left: 20px;
        }

        .box .head {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 375px;
            height: 319px;
            background-color: white;
        }

        .box .head .foot {
            width: 33px;
            height: 169px;
            background-color: yellow;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }

        .head .title {
            margin-left: 17px;
            margin-right: 30px;
            margin-top: 25px;
            font-size: 20px;
            font-weight: bold;
            color: rgba(17, 17, 17, 1);
            line-height: 24px;
        }

        .head .other {
            width: 375px;

        }

        .other .one {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
            margin-right: 18px;
            margin-left: 12px;
        }

        .other .two {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-right: 18px;
            margin-left: 12px;
        }

        .one .a {
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(246, 83, 88, 1);
        }

        .one .b {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
        }

        .two .c {
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            text-decoration: line-through;
            color: rgba(163, 165, 168, 1);
        }

        .two .d {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
        }

        .box .fit {
            display: flex;
            flex-direction: column;
            align-items: left;
            width: 375px;
            height: 121px;
            margin-top: 9px;
            background-color: white;
            padding-top: 10px;
        }

        .fit .fit-tenant {
            font-size: 17px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgb(49, 43, 43);
            margin-left: 17px;
        }

        .fit .fit-shop img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }

        .fit .fit-shop {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(17, 17, 17, 1);
            margin-left: 15px;
            margin-top: 15px;
        }

        .fit .fit-address {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 14px;
        }

        .fit-address .left img {
            width: 16px;
            height: 16px;
            margin-left: 15px;
            margin-right: 4px;
        }

        .fit-address .left .font {
            width: 200px;
        }

        .fit-address .left {
            width: 220px;
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 220px;
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            width: 300px;
        }

        .fit-address .center {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 80px;
            height: 35px;
            border-right: 1px solid #ddd;

        }

        .fit-address .center img {
            height: 16px;
            width: 16px;
            margin-bottom: 3px;
        }

        .fit-address .right {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 80px;
            height: 35px;
        }

        .fit-address .right img {
            height: 16px;
            width: 16px;
            margin-bottom: 3px;
        }

        .box .activity {
            display: flex;
            flex-direction: column;
            align-items: left;
            height: 184px;
            width: 375px;
            background-color: white;
            margin-top: 9px;
        }

        .activity .title {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            height: 44px;
            width: 375px;
            border-bottom: 1px solid #ddd;
        }

        .activity p {
            margin-left: 17px;
            font-size: 17px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(17, 17, 17, 1);
            margin-top: 18px;
        }

        .activity .content {
            display: flex;
            flex-direction: column;
            margin-top: 22px;
            margin-left: 17px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
        }

        .box .rule {
            height: 135px;
            width: 375px;
            margin-top: 9px;
            background-color: white;
        }

        .rule .rule-title {
            font-size: 17px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(17, 17, 17, 1);
            margin-left: 17px;
            margin-top: 18px;
        }

        .rule .rule-time {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(17, 17, 17, 1);
            margin-left: 20px;
            margin-top: 16px;
        }

        .rule .rule-date {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
            margin-left: 22px;
            margin-top: 6px;
        }

        .box .procedure {
            width: 375px;
            height: 143px;
            background-color: white;
            margin-top: 9px;

        }

        .box .procedure img {
            widows: 233px;
            height: 40px;
        }

        .procedure .procedure-title {
            font-size: 17px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(17, 17, 17, 1);
            margin-left: 17px;
            margin-top: 18px;
        }

        .procedure img {
            margin-left: 70px;
            margin-top: 16px;
        }

        .procedure .procedure-point {
            margin-left: 19px;
            margin-top: 10px;
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
        }

        .procedure .procedure-point span {
            color: #EC7043;
        }

        .box .more {
            width: 375px;
            height: 163px;
            background-color: white;
            margin-top: 9px;
        }

        .more .more-title {
            margin-left: 17px;
            margin-top: 18px;
            font-size: 17px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(17, 17, 17, 1);
        }

        .more .more-information {
            margin-left: 22px;
            margin-top: 13px;
        }

        .box .bottom {
            height: 55px;
            width: 375px;
            background-color: white;
            margin-top: 9px;
            display: flex;
            flex-direction: row;
        }

        .bottom .bottom-time {
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            margin-left: 12px;
            margin-top: 11px;
        }

        .bottom .bottom-date {
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
            margin-left: 13px;
            margin-top: 7px;
        }

        .bottom .bottom-sign {
            width: 181px;
            height: 39px;
            line-height: 39px;
            text-align: center;
            background: rgba(50, 177, 108, 1);
            border-radius: 20px;
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(253, 249, 248, 1);
            margin-left: 75px;
            margin-top: 8px;
        }
    </style>
